<template>
  <div class="app-container">
    {{this.$route.query}}


    <div class="filter-container">
      <el-button class="filter-item" icon="el-icon-circle-plus-outline" @click="showDialogVisible(null)">新增</el-button>
    </div>

    <el-table
      :data="tableInfo.data"
      border
      style="width:100%"
      class="init_table">

      <el-table-column
        align="center"
        width="50"
        type="index"
        label="序号">
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        prop="username"
        label="登录名"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        prop="idCard"
        label="身份证号码"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="phoneNumber"
        label="手机号码"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="email"
        label="邮箱"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        label="性别"
        :min-width="tableInfo.minWidth">
        <template slot-scope="scope">
          <p v-if="scope.row.gender==0" type="danger">女</p>
          <p v-if="scope.row.gender==1" type="success">男</p>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="状态"
        :min-width="tableInfo.minWidth">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.active==0" type="danger">停用</el-tag>
          <el-tag v-if="scope.row.active==1" type="success">启用</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDialogVisible(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination v-show="total>0"
                     :current-page="tableQuery.pageNum"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="tableQuery.pageSize"
                     :total="total"
                     background layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </div>


    <el-dialog title="角色" :visible.sync="dialogVisible" width="40%" top="10vh">
      <el-form ref="submitForm" :rules="rules" :model="submitData" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="submitData.name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="登录名：" prop="username">
              <el-input v-model="submitData.username"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="身份证：" prop="idCard">
              <el-input v-model="submitData.idCard"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="手机号：" prop="phoneNumber">
              <el-input v-model="submitData.phoneNumber"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="submitData.email"/>
            </el-form-item>
          </el-col>
        </el-row
        <el-row>
          <el-col :span="22">
            <el-form-item label="状　态：" prop="active">
              <el-radio-group v-model="submitData.active">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="operateType=='add'" type="primary" @click="handleAddData">确定</el-button>
        <el-button v-else type="primary" @click="handleModifyData">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="分配权限" :visible.sync="dialogVisibleResource" width="40%" top="10vh">
      <el-tree
        ref="tree"
        :data="resourceTreeData"
        :props="treeProps"
        :default-checked-keys="checkedKeys"
        show-checkbox
        class="filter-tree"
        node-key="id"
        default-expand-all
        highlight-current
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleResource = false">取消</el-button>
        <el-button type="primary" @click="handleAddRoleResourceData">确定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {listUseUnit,addUseUnit,modifyUseUnit} from '@/api/ele/useUnit'
  import {handleRequest} from '@/utils/system'

  export default {
    data: () => ({
      dialogVisible: false,
      operateType: null,
      submitData: {
        id: null,
        username: null,
        name: null,
        idCard: null,
        phoneNumber: null,
        email: null,
        active: null
      },
      rules: {
        username: [{required: true, message: '不能为空', trigger: 'change'}],
        name: [{required: true, message: '不能为空', trigger: 'change'}],
        idCard: [{required: true, message: '不能为空', trigger: 'change'}],
        phoneNumber: [{required: true, message: '不能为空', trigger: 'change'}],
        email: [{required: true, message: '不能为空', trigger: 'change'}],
        gender: [{required: true, message: '不能为空', trigger: 'change'}],
        active: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      tableQuery: {
        username: null,
        name: null,
        idCard: null,
        phoneNumber: null,
        email: null,
        gender: null,
        pageNum: 1,
        pageSize: 10,
        sort: 'create_date',
        order: 'descending'
      },
      tableInfo:{
        data: null,
        total:null,
        minWidth:50
      }
     

    }),
    mounted() {
      this.refreshTable();
    },
    methods: {
      resetSubmitData() {
        this.submitData = {
          id: null,
          username: null,
          name: null,
          idCard: null,
          phoneNumber: null,
          email: null,
          gender: null,
          active: null
        }
      },
      showDialogVisible(row) {
        this.resetSubmitData()
        this.operateType = 'add'
        this.dialogVisible = true
        if (row) {
          this.submitData = {...row}
          this.operateType = 'modify'
        }
        this.$nextTick(() => {
          this.$refs['submitForm'].clearValidate()
        })
      },
      handleAddData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: addUseUnit,
              data: this.submitData,
              operateType: "新增",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      },
      handleModifyData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: modifyUseUnit,
              data: this.submitData,
              operateType: "修改",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      },
      refreshTable() {
        handleRequest({
          method: listUseUnit,
          data: this.tableQuery,
          successCall: (data) => {
            this.tableInfo.data = data.rows
            this.tableInfo.total = data.total
          }
        })
      },
      handleSizeChange(val) {
        this.tableQuery.pageSize = val
        this.refreshTable()
      },
      handleCurrentChange(val) {
        this.tableQuery.pageNum = val
        this.refreshTable()
      },
    }
  }


</script>

<style>
  .init_table {

  }

  .init_table th {
    background-color: #edf6ff;
    text-align: center !important;
    color: #066cd4;
    font-weight: bold;
  }

  .init_table th .cell {
    padding: 0 !important;
  }

  .init_table td,
  .init_table th {
    padding: 0 !important;
    height: 40px !important;
  }


</style>
